{% extends 'layout/indexframe.html' %}

{% block title %}list{% endblock %}

{% block css %}
    <style>
        th {
            font-size: 20px;
            text-align: center;
        }

        td {
            font-size: 20px;
            text-align: center;
        }
    </style>
{% endblock %}

{% block content %}

    <div class="wrapper wrapper-content animated fadeInRight">
        <div style="margin-bottom: 10px;" class="clearfix">
            <div>
                <div style="float:right;width: 300px;">
                    <form method="get">
                        <div class="input-group">
                            <input type="text" name="q" class="form-control" placeholder="输入topic以查询数据..."
                                   value={{ value }}>
                            <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit">查询</button>
                            </span>
                        </div>

                    </form>
                    <div>
                        <button class="btn btn-primary" id='datadel'>批量删除历史数据</button>
                    </div>


                </div>
            </div>


            <div class="panel panel-default">

                <div class="panel-heading" style="font-size: 40px;text-align: center;">数据列表</div>


                <table class="table">
                    <thead>
                    <tr>
                        <th>标识</th>
                        <th>来源Topic</th>
                        <th>数据</th>
                        <th>设备类型</th>
                        <th>产生时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for obj in queryset %}
                        <tr>
                            <th>{{ obj.characteristic }}</th>
                            <td>{{ obj.devtopic }}</td>
                            <td title="{{ obj.datadetail }}" style="cursor: pointer;">{{ obj.devdata }}</td>
                            <td>{{ obj.send_flag }}</td>
                            <td>{{ obj.datarecord }}</td>
                            <td>

                                <a class="btn btn-danger btn-xs delbtn" nid={{ obj.id }} href="#"}">删除</a>

                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

            <div style="text-align: center;">
                <nav aria-label="Page navigation">
                    <ul class="pagination pagination-lg">
                        {{ page_str }}
                    </ul>
                </nav>
            </div>


        </div>

    </div>




    {#发布详情#}
    <div class="modal fade" id="myModaldel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>删除</strong></h1>
                </div>
                <div class="modal-body">
                    <form id="pubfrom">
                        <div class="clearfix">
                            <div style="margin-left: 100px;">
                                <div class="form-group">
                                    <label><h2><strong>要请选择要删除数据的主题</strong></h2></label>
                                    <div>
                                        <select id="deltopic" style="width: 118px;height: 34px;">
                                            <option selected>未选择</option>
                                            {% for topic in obj %}
                                                <option>{{ topic.devtopic }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label><h2><strong>需要删除最旧的多少条数据？</strong></h2></label>
                                    <div><textarea id="delnum" style="height: 50px;"></textarea></div>
                                    <span id="sendmes" style="color:#aa1111;"></span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input id="deldata" type="button" class="btn btn-primary" value="删除">

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            $('#datalist').addClass('active')
        });

        $(function () {
            binddelbtn();
            binddatadel();
            bindselect();
            bindclosemodal();
        })

        function binddelbtn() {
            $(".delbtn").click(function () {
                nid = $(this).attr('nid');
                $.ajax({
                    url: "/web/data/del/",
                    type: "GET",
                    data: {'nid': nid},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            window.location.reload();
                        } else {
                            alert("error del")
                        }
                    }
                })
            })
        }

        function binddatadel() {
            $('#datadel').click(function () {
                $('#myModaldel').modal('show');

            });
        }
        function bindselect() {
            $('#deldata').click(function () {
                var topic = $('#deltopic').children('option:selected').val();
                var data = $('#delnum').val();
                $.ajax({
                    url: "/web/data/batchdel/",
                    type: "POST",
                    data: {"topic": topic, "data": data},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes').text("删除成功")
                        } else {
                            $('#sendmes').text("删除失败请检查topic与删除数量")
                        }
                    }
                })
            })

        }

        function bindclosemodal() {
            $('#myModaldel').on('hidden.bs.modal',
                function () {
                    $('#sendmes').empty()
                    document.getElementById('delnum').value=''
                    location.reload();
                })
        }
    </script>>

    </script>

{% endblock %}